<template>
<div>
    <div class="zhezhao" :class="switchOpen" @click="toggle" style="position: fixed;overflow:scroll"></div>
        <div id="CreateOrder" :class="switchOpen" style="position: fixed;overflow-y: scroll;">
            <div class="title">
                <span style="float:left;margin-left: -30px">
                    {{selected.contrastColorName}}
                </span>
                <el-input v-model="search_color_code2" class="input_search" placeholder="请输入绣字颜色编号" style="width: 260px;float: left;margin-right: 40px;margin-top: -10px;margin-left: 10px">
                    <el-button slot="append" icon="el-icon-search" @click="show_colorpagelist()"></el-button>
                </el-input>

              <a @click="toggle" style="float: right;color: #2D2D2D;font-size: 15px;font-weight: bolder;margin-right: 10px;margin-top: -4px">
                  <p>关闭</p>
              </a>
                <a @click="show_colorpagelist" style="float: right;color: #2D2D2D;font-size: 16px;font-weight: bolder;margin-right: 15px;margin-top: -4px">
                    <p>刷新</p>
                </a>
            </div>

            <div class="list">
                <el-radio-group v-model="$store.state.OrderUser.EditzhuangseIds[selected.id]" @change="select">
                    <el-radio-button v-for="y in xiuziColorData2" :key="y.id" :label="y" :value="y.colorName">
                        <div><img :src="y.colorImg" alt=""></div>
                        <strong>{{y.colorName}}</strong><br/><br/>
                        <strong>{{y.code}}</strong>
                    </el-radio-button>
                </el-radio-group>

                <!--分页插件-->
                <div class="mom-pagination">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="pageTotal4"
                            :page-size="pageSize2"
                            :pager-count="pagerCount4"
                            @next-click="currentPage2+=1,handleCurrentChange"
                            @prev-click="currentPage2-=1,handleCurrentChange"
                            @current-change="handleCurrentChange"
                    >
                    </el-pagination>
                </div>
            </div>

        </div>
</div>
</template>

<script>
import Vue from 'vue'
export default {
    name: 'ZSopen',
    props:['open','selected'],
    data() {
        return{
            search_color_code2:'',
            pageTotal4: 20, // 总条目
            pageSize2: 14, // 页面大小
            currentPage2: 1, // 当前页
            pagerCount4: 5, // 总共有几页
            xiuziColorData2: [],
            button_list_on: true,//底部按钮组件
            order_list_open: this.open,//产品列表收展开关
            selectValue: {},
            states: true,//true重新绑定
        }
    },
    created() {
            this.xiuziColorData2=[];
            this.show_colorpagelist();

    },
    computed: {
        switchOpen(){
            return this.open;
        },
        switchSelect() {
            return this.selected;
        }
    },
    methods:{
        // 分页触发请求
        handleCurrentChange(val) {//绣字颜色
            this.currentPage2 = val
            this.show_colorpagelist()
        },
        select(value) {
            Vue.set(this.$store.state.OrderUser.EditzhuangseIds,this.selected.id,value.colorName);
            let arr = '';
            for(let x in this.$store.state.OrderUser.EditzhuangseIds) {
                if(arr == '') {
                    arr = x + '/' + this.$store.state.OrderUser.EditzhuangseIds[x];
                }else {
                    arr += ',' + x + '/' + this.$store.state.OrderUser.EditzhuangseIds[x];
                }
            }
            this.$store.state.OrderUser.Order_user_Info_temp.zhuangseIds = arr;
            this.$emit('closed');
        },
        toggle() {
            this.$emit('closed');
        },
        show_colorpagelist(){//查询颜色
            let params_color = new FormData();
            params_color.append("category_ids", this.$store.getters.getOrder_user_category_id());
            params_color.append("pageNo", this.currentPage2);
            params_color.append("pageSize", 15);
            params_color.append("code", this.search_color_code2);
            this.$http.post('logic/interface/query_xiuziColorPageList',params_color).then( async(result) => {
                // this.xiuziColorData = result.data.data;
                this.xiuziColorData2 = result.data.data.records;
                this.pageTotal4 = result.data.data.total
                this.pageSize2 = result.data.data.size
            });
        },
    }
}
</script>

<style scoped lang="scss">
#CreateOrder.open{transition: all .7s ease-out;}
#CreateOrder.close{right: -580px; visibility: hidden;}
#CreateOrder{background: #ffffff; z-index: 999; position: absolute; top:0;right: 0px; padding: 20px 0px 0 20px;
 height: 100%;overflow-y:auto;padding-bottom: 10px;
}
#CreateOrder .title{ margin: 10px 0 20px 0px; border-left: 5px solid #000000; padding-left: 15px;font-size: 16px;}

.list{width: 430px;}
.list /deep/ .el-radio-group label{ margin: 0 10px 20px 0!important; padding-bottom: 10px;}
.list /deep/ .el-radio-group label img{ width: 130px; height: 130px; margin: 0 auto 10px auto;}
.list /deep/ .el-radio-group label span{border: 1px solid #DCDFE6;}
.list /deep/ .el-radio-button__inner{ padding: 0 0 10px 0;}
.list /deep/ .el-radio-button__inner strong{
    cursor: pointer;
     font-weight: inherit; background: #EAEAEA; padding: 3px 12px; border-radius: 5px;}
.list /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner{background: #ffffff; border-color:$color; color: $font_color;box-shadow:0 0 0 0 $color;}
.list /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner strong{background: $color; font-weight: bold;}


/* .list{width: 430px;display: flex;flex-flow: wrap;}
.list .li{width: 130px; border: 1px solid #D8D8D8; border-radius: 4px; margin: 0 10px 10px 0; text-align: center;
padding-bottom: 10px;}
.list .li img{ width: 130px; height: 130px; margin: 0 auto;}
.list .li:hover{ border-color: $color;}
.list .li strong{font-weight: inherit; background: #EAEAEA; padding: 3px 12px; border-radius: 5px; background: #000000!important; color: $color;} */
</style>
